<%--
  Created by IntelliJ IDEA.
  User: Pro
  Date: 2017/6/19
  Time: 21:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <base href="${pageContext.request.contextPath}/">
    <title>用户中心</title>
    <link rel="shortcut icon" href="static/assets/css/images/favicon.png">
    <link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/assets/css/main-copy.css">
    <link rel="stylesheet" href="static/assets/css/font-awesome.min.css">
    <script src="static/assets/js/art-template-web.js"></script>
</head>
<body>
<%@include file="../../public/header.jspf" %>

<div class="container pt-5 mt-5">
    <div>
        <h3 class="text-center">用户中心</h3>
        <div class="row pb-2">
            <div class="col">
                <a class="btn btn-outline-primary btn-sm" href="user/article" target="_blank">我要再写一篇文章</a>
            </div>
            <div class="col text-right">
                <button class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#1">
                    修改用户信息
                </button>
            </div>
        </div>

    </div>
    <%--<div><h3 class="text-center">用户中心</h3><a href="user/article">我要再写一篇文章</a></div>--%>

    <div id="Article-list"></div>
    <nav class="text-center pt-5 mt-2" aria-label="Page navigation">
        <div id="page-list"></div>
    </nav>
    <%@include file="../../public/modal.jspf" %>
</div>

<div class="modal fade pt-5" id="1" role="dialog" aria-labelledby="1Label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="1Label">用户信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group bottom_line "
                     style="border-bottom-width:0.2em; padding-top: 20px; border-top-color: #ececec;">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" value="${user.password}" name="password" id="password"
                           placeholder="密码"
                    >
                </div>
                <div class="form-group bottom_line">
                    <label for="email">邮箱</label>
                    <input type="text" class="form-control" value="${user.email}" name="email" id="email"
                           placeholder="邮箱">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-outline-success btn-sm" onclick="save()">保存</button>
            </div>

        </div>
    </div>
</div>

<%--<a href="javascript:void(0)" style="text-decoration:none;" data-toggle="modal" data-target="#1"--%>
<%--style="float: right;margin-top:-40px;margin-right: 20px">--%>
<%--修改用户信息--%>
<%--</a>--%>
<script id="Article-manage-template" type="text/html">
    <table class="table table-bordered">
        <thead>
        <tr class="table-danger">
            <td>文章id</td>
            <td>文章标题</td>
            <td>文章作者</td>
            <td>发表时间</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        {{each items item index}}
        <tr>
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.author}}</td>
            <td>{{item.time}}</td>
            <td id="{{item.id}}">
                <a class="btn btn-sm btn-primary" href="user/article/{{item.id}}" target="_blank">修改</a> |
                <a class="btn btn-sm btn-primary" href="article/{{item.id}}">查看</a> |
                <button class="btn btn-sm btn-primary " onclick="deleteArticle('{{item.id}}')">删除</button>
            </td>
        </tr>
        {{/each}}
        </tbody>
    </table>
</script>
<%--页面底部部分--%>
<%@include file="../../public/footter.jspf" %>

<script>
    getPage(1, 3);

    function getPage(currentPage, size) {
        var url = 'api/user/article/list?currentPage=' + currentPage + '&size=' + size;
        $.ajax({
            url: url,
            type: "GET",
            success: function (data) {
                // console.log(data);
                //渲染列表
                var html = template('Article-manage-template', {
                    items: data.content
                });
                document.getElementById('Article-list').innerHTML = html;

                html = '<nav class="text-center pt-5 mt-2" aria-label="Page navigation"><ul class="pagination justify-content-center">';
                html += '<li class="page-item"><a class="page-link" onclick="getPage(' + (data.page - 1) + ',' + 3 + ')" href="javascript:void(0)">上一页</a></li>';
                //渲染控件 （上一页|1、2、3、4|下一页）
                for (var i = 1; i <= Math.ceil(data.count / data.size); i++) {
                    console.log(Math.ceil(data.count / data.size));
                    if (i === data.page) {
                        html += '<li class="page-item active"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>';
                    } else {
                        html += '<li class="page-item"><a class="page-link"  onclick="getPage(' + i + ',' + 3 + ')"  href="javascript:void(0)">' + i + '</a></li>';
                    }
                }
                html += '<li class="page-item"><a class="page-link" onclick="getPage(' + (data.page + 1) + ',' + 3 + ')" href="javascript:void(0)">下一页</a></li>';
                html += '</ul></nav>';
                document.getElementById('page-list').innerHTML = html;
            }
        })
    }

    var modal = $('#exampleModal');
    var info = $('#modalInfo');

    function deleteArticle(id) {
        $.ajax({
            type: "DELETE",
            url: 'api/user/article/' + id,
            success: function (data) {
                if (data == '1') {
                    info.text('删除成功！');
                    modal.modal('show');
                    getPage(1, 3);

                } else {
                    info.text('删除失败！');
                    modal.modal('show');

                }
            }
        });
    }

</script>

<script>

    function save() {
        var user;
        $.ajax({
            url: 'api/user',
            data: user,
            type: 'PUT',
            success: function (data) {
                user = data;
                $('#1').modal('hide');
            },
            error: function (data) {
                console.log(data)
            }
        })

    }
</script>
</body>
</html>
